<template>
  <div>
    <div class="activ-cont">
      <div v-for="(temp,index) in activelist" :key="index" class="act-list" @click="routerLink(`ActiveDetails`, temp)">
        <div class="left">
          <img :src="temp.piccap||activeImg" alt class="pic">
        </div>
        <div class="right">
          <div class="title">{{ temp.title }}</div>
          <div class="data">
            <span class="time">{{ temp.release_at }}</span>
            <span class="see">
              <span>
                <img src="@/assets/see.png" alt class="see-img">
              </span>
              <span class="views-num">{{ temp.pageviews }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// api
import { active } from '@/api/gain.js'
import activeImg from '@/assets/active.png'
export default {
  data() {
    return {
      activelist: [],
      activeImg
    }
  },
  created() {
    active().then(res => {
      console.log('active', res)
      this.activelist = res.data
    })
  },
  methods: {
    routerLink(link, info) {
      console.log(info)
      this.$router.push({ name: link, params: { activeData: info }})
    }
  }
}
</script>
<style scoped>
.exit {
  /* width: 96%; */
  background: #d94141;
  height: 30px;
  line-height: 30px;
  color: #fff;
  display: flex;
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 0 3%;
}
.activ-cont {
  width: 95%;
  margin: 0 auto;
}
.act-list {
  width: 100%;
  padding: 3% 0 3%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
}
.title {
  height: 45px;
  overflow: hidden;
  font-weight: bold;
  font-size: 1.0625rem;
}
.pic {
  width: 100%;
  height: 100%;
}
.left {
  /* border: 1px solid #ccc; */
  width: 108px;
  height: 82px;
  overflow: hidden;
  border-radius: 6px;
}
.right {
  padding-left: 3%;
  box-sizing: border-box;
  /* border: 1px solid; */
  width: 250px;
}
.data {
  padding-top: 7%;
  display: flex;
  justify-content: space-between;
}
.time {
  color: #adadad;
  font-size: 0.75rem;
}
.see {
    display: inline-block;
    text-align: left;
    width: 50px;
}
.see-img {
  margin-right: 5px;
  width: 15px;
}
.views-num {
  font-size: 0.75rem;
  color: #d94141;
}
</style>

